<template>
    <view class="fee-management">
        <!-- 网格布局：自动适配列数，支持多端响应式 -->
        <!-- <u-divider class="title" textColor="#2979ff" textSize="18" :text="cardData.appCategoryName"></u-divider> -->
        <view class="group-title ">
                <text class="txt txtTitle">{{ cardData.alias || cardData.classifyName }}</text>
                <text class="empty"></text>
           
        </view>
        <u-grid :col="4" class="manageBox" :border="false">
            <u-grid-item v-for="(item, index) in cardData.apps" @click="jumpApp(item)" :key="item.appId">
                <view class="fee-item">
                    <!-- 图标：可替换为本地图片或uView图标 -->
                    <image :src='getIconSrc(item)' mode="aspectFit" class="fee-icon" />
                    <!-- <image :src="item.icon" mode="aspectFit" v-else 
                        class="fee-icon" /> -->
                    <text class="fee-label">{{ item.appName }}</text>
                </view>
            </u-grid-item>
        </u-grid>
    </view>
</template>

<script>
export default {
    name: "FeeManagement",
    props: {
        cardData: Object,
    },
    data() {
        return {
           
        };
    },
    methods: {
        // 图片加载失败
        imgError(item) {
            this.$set(item, 'isIcon', true)
        },
        getIcon(icon) {

        },
        jumpApp(ele) {
            this.$emit('jump', ele)
        },
        getIconSrc(item) {
            if (!item.refDevopsAppId) {
                // 自定义应用
                if (/^http/.test(item.appIcon)) {
                    return item.appIcon
                } else {
                    return `${this.$baseUrl}/${item.appIcon}`
                }
            }

            if (item.h5Icon) {
                if (item.h5Icon.indexOf('/roc-api-web/') > -1) {
                    let appendSrc = item.h5Icon.split('/roc-api-web/')[1]
                    let picSrc = this.$baseUrl + `/roc-api-web/${appendSrc}`
                    return picSrc
                } else {
                    if (/^http/.test(item.h5Icon)) {
                        return item.h5Icon
                    } else {
                        return this.$baseUrl + `/roc-api-web/static/mobileNew/${item.h5Icon}`
                    }
                }
            } else {
                let picSrc = this.$baseUrl + `/roc-api-web/static/mobileNew/${item.appName}.png`
                return picSrc
            }
        }
    },
};
</script>

<style scoped lang="scss">
.group-title{
    display: block;
       position: relative;
        margin-bottom:20px;
        margin-top: 30rpx;
        border-top: 1px solid #F1F1F1;
        text-align:center;
        .txt{
            position:absolute;
            display:inline-block;
            padding: 0 12px;
            margin-top: -24rpx;
            z-index:1;
            font-size: 18px;
            // width: 100%;
            font-weight: 600;
            // border-radius: 40rpx;
            left: 50%;
            transform: translateX(-50%);
            background:#fff;
            border-bottom: 10rpx solid #bcd0ff;
            // &::after{
            //     content: '';
            //     display: inline-block;
            //     position: absolute;
            //     background: #BCD0FF;
            //     // @include h(4);
            //     left:12px;
            //     right:12px;
            //     bottom:-2px;
            //     z-index:-1;
            // }
        }
        .empty {
            flex: 1;
        }
}

.fee-management {
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 40rpx;
    border-top: 1px solid #fff;
}
.manageBox{
    margin-top: 20rpx;
    width: 100%;
    height: auto;
    // border-top: 1px solid #BCD0FF;
}

title {
    padding-top: 40rpx;
    margin-top: 20rpx;
}

.fee-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fee-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
}

.fee-label {
    font-size: 28rpx;
    color: #333;
    padding: 10rpx 0 20rpx 0rpx;
    box-sizing: border-box;
}
</style>